<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Houdini API示例</title>
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --spacing: 1rem;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 2rem;
            background: #f8f9fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .demo-section {
            background: white;
            padding: 2rem;
            margin: 2rem 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h1, h2 {
            margin-bottom: 1rem;
        }

        /* Properties and Values API 示例 */
        @property --gradient-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        @property --border-size {
            syntax: '<length>';
            initial-value: 2px;
            inherits: false;
        }

        .gradient-border {
            --gradient-angle: 0deg;
            background: linear-gradient(var(--gradient-angle), var(--primary-color), var(--secondary-color));
            border-radius: 8px;
            padding: 2px;
            animation: rotate-gradient 3s linear infinite;
        }

        .gradient-border-content {
            background: white;
            padding: 1rem;
            border-radius: 6px;
        }

        @keyframes rotate-gradient {
            to {
                --gradient-angle: 360deg;
            }
        }

        /* Paint API 示例 */
        .paint-api-demo {
            --dot-color: var(--primary-color);
            --dot-size: 10px;
            --dot-spacing: 20px;
            background-image: paint(dotPattern);
            padding: 2rem;
            margin: 1rem 0;
            border-radius: 8px;
        }

        /* Layout API 示例 */
        .masonry-layout {
            display: layout(masonry);
            gap: 1rem;
            padding: 1rem;
        }

        .masonry-item {
            background: white;
            padding: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Animation API 示例 */
        .spring-animation {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            border-radius: 50%;
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS Houdini API示例</h1>

        <section class="demo-section">
            <h2>Properties and Values API</h2>
            <div class="gradient-border">
                <div class="gradient-border-content">
                    <p>这是一个使用Properties and Values API创建的动画渐变边框。</p>
                    <p>通过@property定义了--gradient-angle和--border-size自定义属性。</p>
                </div>
            </div>
        </section>

        <section class="demo-section">
            <h2>Paint API</h2>
            <div class="paint-api-demo">
                <p>这是一个使用Paint API创建的点状背景图案。</p>
                <p>可以通过CSS自定义属性控制点的颜色、大小和间距。</p>
            </div>
        </section>

        <section class="demo-section">
            <h2>Layout API</h2>
            <div class="masonry-layout">
                <div class="masonry-item">项目1 - 短内容</div>
                <div class="masonry-item">项目2 - 较长的内容<br>多行文本示例<br>展示瀑布流布局</div>
                <div class="masonry-item">项目3 - 中等内容<br>两行文本</div>
                <div class="masonry-item">项目4 - 很长的内容<br>多行文本示例<br>用于测试<br>瀑布流布局效果</div>
            </div>
        </section>

        <section class="demo-section">
            <h2>Animation API</h2>
            <div class="spring-animation" id="springAnimation"></div>
            <button onclick="animateSpring()">触发弹簧动画</button>
        </section>
    </div>

    <script>
        // Paint API - 点状图案
        if ('paintWorklet' in CSS) {
            CSS.paintWorklet.addModule(`
                registerPaint('dotPattern', class {
                    static get inputProperties() {
                        return ['--dot-color', '--dot-size', '--dot-spacing'];
                    }

                    paint(ctx, size, properties) {
                        const dotColor = properties.get('--dot-color');
                        const dotSize = parseInt(properties.get('--dot-size'));
                        const dotSpacing = parseInt(properties.get('--dot-spacing'));

                        ctx.fillStyle = dotColor;
                        
                        for (let x = 0; x < size.width; x += dotSpacing) {
                            for (let y = 0; y < size.height; y += dotSpacing) {
                                ctx.beginPath();
                                ctx.arc(x, y, dotSize / 2, 0, 2 * Math.PI);
                                ctx.fill();
                            }
                        }
                    }
                });
            `);
        }

        // Layout API - 瀑布流布局
        if ('layoutWorklet' in CSS) {
            CSS.layoutWorklet.addModule(`
                registerLayout('masonry', class {
                    static get inputProperties() {
                        return ['gap'];
                    }

                    async intrinsicSizes() {}

                    async layout(children, edges, constraints, styleMap) {
                        const gap = parseInt(styleMap.get('gap')) || 0;
                        const columnWidth = 200;
                        const columns = Math.floor(constraints.fixedInline / (columnWidth + gap));
                        const columnHeights = new Array(columns).fill(0);
                        
                        let childFragments = [];

                        for (const child of children) {
                            const minColumn = columnHeights.indexOf(Math.min(...columnHeights));
                            const childFragment = await child.layoutNextFragment({
                                fixedInline: columnWidth
                            });

                            childFragment.inlineOffset = minColumn * (columnWidth + gap);
                            childFragment.blockOffset = columnHeights[minColumn];
                            columnHeights[minColumn] += childFragment.blockSize + gap;
                            
                            childFragments.push(childFragment);
                        }

                        return {
                            childFragments,
                            autoBlockSize: Math.max(...columnHeights)
                        };
                    }
                });
            `);
        }

        // Animation API - 弹簧动画
        function animateSpring() {
            if ('animationWorklet' in CSS) {
                const element = document.getElementById('springAnimation');
                const animation = new WorkletAnimation('spring', 
                    new KeyframeEffect(element, [
                        { transform: 'translateX(0)' },
                        { transform: 'translateX(200px)' }
                    ], {
                        duration: 1000,
                        easing: 'linear'
                    })
                );
                animation.play();
            }
        }

        if ('animationWorklet' in CSS) {
            CSS.animationWorklet.addModule(`
                registerAnimator('spring', class {
                    animate(currentTime, effect) {
                        const progress = currentTime / effect.getTiming().duration;
                        const dampedProgress = 1 - Math.pow(Math.E, -5 * progress) * Math.cos(10 * progress);
                        effect.setKeyframes([
                            { transform: 'translateX(0)' },
                            { transform: \`translateX(\${200 * dampedProgress}px)\` }
                        ]);
                    }
                });
            `);
        }
    </script>
</body>
</html>
